import PropTypes from 'prop-types';
import React from 'react';

import Box from '../box/box.jsx';
import Modal from '../../containers/modal.jsx';
import styles from './slider-prompt.css';


const SliderPromptComponent = props => (
    <Modal
        className={styles.modalContent}
        contentLabel="改变滑块范围"
        id="sliderPrompt"
        onRequestClose={props.onCancel}
    >
        <Box className={styles.body}>
            <Box className={styles.label}>
                最小值
            </Box>
            <Box>
                <input
                    className={styles.minInput}
                    name="最小值"
                    pattern="-?[0-9]*(\.[0-9]+)?"
                    type="text"
                    value={props.minValue}
                    onChange={props.onChangeMin}
                    onKeyPress={props.onKeyPress}
                />
            </Box>
            <Box className={styles.label}>
                最大值
            </Box>
            <Box>
                <input
                    className={styles.maxInput}
                    name="最大值"
                    pattern="-?[0-9]*(\.[0-9]+)?"
                    type="text"
                    value={props.maxValue}
                    onChange={props.onChangeMax}
                    onKeyPress={props.onKeyPress}
                />
            </Box>
            <Box className={styles.buttonRow}>
                <button
                    className={styles.cancelButton}
                    onClick={props.onCancel}
                >
                    取消
                </button>
                <button
                    className={styles.okButton}
                    onClick={props.onOk}
                >
                    确定
                </button>
            </Box>
        </Box>
    </Modal>
);

SliderPromptComponent.propTypes = {
    maxValue: PropTypes.string,
    minValue: PropTypes.string,
    onCancel: PropTypes.func.isRequired,
    onChangeMax: PropTypes.func.isRequired,
    onChangeMin: PropTypes.func.isRequired,
    onKeyPress: PropTypes.func.isRequired,
    onOk: PropTypes.func.isRequired
};

export default SliderPromptComponent;
//export default injectIntl(SliderPromptComponent);
